<template>
  <div class="list" ref="wrapper">
    <div>
        <div class="area">
            <div class="title border-topbottom">当前城市</div>
            <div class="button-list">
                <div class="button-wrapper">
                    <div class="button">{{this.currentCity}}</div>
                </div>
            </div>
        </div> 
        <div class="area">
            <div class="title border-topbottom">热门城市</div>
            <div class="button-list">
                <div class="button-wrapper"
                  v-for="(item,index) in hotCities"
                   :key = 'item.id'
                   @click = handleChangeCity(item.name)
                   >
                    <div class="button">{{item.name}}</div>
                </div>
            </div>
        </div>
        <div class="area" v-for="(item,key) in cities" :key="key" :ref = "key">
            <div class="title border-topbottom">{{key}}</div>
            <div class="item-list">
                <div class="item border-bottom"
                 v-for="(itemCity,index) in item"
                  :key = "index"
                  @click="handleChangeCity(itemCity.name)"
                  >
                  {{itemCity.name}}
                  </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import Bscroll from 'better-scroll'
import { mapState,mapMutations } from 'vuex'
export default {
name:'cityList',
  components:{},
  props:{
      hotCities:Array,
      cities:Object,
      letter:String
  },
  data(){
    return {
    }
  },
  watch:{
      letter(){
          if(this.letter){
              const ele = this.$refs[this.letter][0]
              this.scroll.scrollToElement(ele)
          }
          
      }
  },
  computed:{
      ...mapState({
          currentCity:'city'
      })
  },
  methods:{
      handleChangeCity(city){
        //   this.$store.commit('changeCity',city)
        this.changeCity(city)
          this.$router.push({path:'/'})
      },
      ...mapMutations(['changeCity'])
  },
  created(){},
  mounted(){
      this.scroll = new Bscroll(this.$refs.wrapper)
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.border-topbottom
 &:before
  color #ccc
 &:after
  color #ccc
.border-bottom
 &:before
  color #ccc
.list
  position absolute
  overflow hidden
  top 1.58rem
  bottom 0
  left 0
  right 0
  .title
    line-height 0.54rem
    background #eeeeee
    padding-left 0.2rem
    color #666
    font-size 0.26rem
  .button-list
    overflow hidden
    padding 0.1rem 0.6rem 0.1rem 0.1rem
    .button-wrapper
      width 33.33%
      float left
      .button 
        padding 0.1rem
        margin 0.1rem
        text-align center
        border 0.02rem solid #ccc
        border-radius 0.06rem
  .item-list 
    .item
      padding-left 0.2rem
      line-height 0.76rem    
</style>